<div class="prompt-box bborder">
    <div class="header">
        <div class="title"><i class="fa-solid fa-triangle-exclamation"></i>{{ 'COMPATIBILITY_DIALOG.TITLE' | translate }}</div>
        <div class="win-btns">
            <div class="btn ccenter close" (click)="cancel()">
                <i class="fa-light fa-xmark"></i>
            </div>
        </div>
    </div>
    <div class="content">
        <div class="text">
            <div class="t1">{{ 'COMPATIBILITY_DIALOG.WARNING_MESSAGE' | translate }}</div>
            <div class="t2">
                <div class="t2-text">
                    {{ 'COMPATIBILITY_DIALOG.SUPPORTED_CORES' | translate }}
                </div>
                <div>
                    @for(tag of libCompatibility; track $index) {
                    <nz-tag>{{tag}}</nz-tag>
                    }
                </div>
            </div>
            <div class="t2">{{ 'COMPATIBILITY_DIALOG.CURRENT_BOARD_CORE' | translate }}<nz-tag nzColor="processing">{{boardCore}}</nz-tag></div>
        </div>
        <div class="footer">
            <button nz-button [nzSize]="'small'" nzType="default" (click)="cancel()">{{ 'COMPATIBILITY_DIALOG.CANCEL' | translate }}</button>
            <button nz-button [nzSize]="'small'" nzType="primary" nzDanger (click)="continue()">{{ 'COMPATIBILITY_DIALOG.CONTINUE_INSTALL' | translate }}</button>
        </div>
    </div>
</div>